<template>
  <!-- auto-upload：本地上传 -->
  <el-upload
    :class="isHideLoad ? 'hide' : ''"
    ref="uploadRef"
    :before-upload="handleBeforeUpload"
    :on-change="handleChange"
    :on-exceed="handleExceed"
    :on-remove="handleDelete"
    :on-preview="handlePictureCardPreview"
    list-type="picture-card"
    v-bind="attrs"
    :limit="limit"
    :auto-upload="false"
    ><el-icon><Plus /></el-icon
  ></el-upload>
  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>
<script setup>
import { ElMessage } from 'element-plus'
const props = defineProps({
  /* 注意：上传文件数量限制，不能不定义 */
  limit: {
    type: Number,
    default: 5
  },
  /* 单个上传文件大小限制 */
  fileSize: {
    type: Number,
    default: 500
  },
  /* 允许上传的文件类型, 例如['png', 'jpg', 'jpeg'] */
  fileType: {
    type: Array,
    default: () => ['doc', 'xls', 'ppt', 'txt', 'pdf', 'png', 'jpg', 'jpeg']
  },
  /* 是否显示文件上传提示 */
  isShowTip: {
    type: Boolean,
    default: true
  },
  /* 上传文件数量达到上限时是否隐藏上传按钮 */
  isHideUpload: {
    type: Boolean,
    default: false
  }
})

const attrs = useAttrs()
const isHideLoad = ref(false)
const uploadRef = ref()
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const fileType = ref([])
const fileSize = ref(0)
const loading = ref(null)

const handleBeforeUpload = file => {
  console.log(file)

  // 校检文件类型
  // if (fileType.value.length > 0) {
  //   let fileExtension = ''
  //   if (file.name.lastIndexOf('.') > -1) {
  //     fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1)
  //   }
  //   const isTypeOk = fileType.value.some(type => {
  //     return fileExtension && fileExtension.indexOf(type) > -1
  //   })
  //   if (!isTypeOk) {
  //     warningNotify(
  //       `文件格式不正确，请上传${fileType.value.join('/')}格式文件！`
  //     )
  //     return false
  //   }
  // }
  // // 校检文件大小
  // if (fileSize.value > 0) {
  //   // KB
  //   const fileSizeInKB = file.size / 1024
  //   const isLt = fileSizeInKB < fileSize.value
  //   if (!isLt) {
  //     warningNotify(`上传文件大小不能超过 ${fileSize.value} KB!`)
  //     return false
  //   }
  // }
  // // 开始上传
  // loading.value = createLoading({
  //   lock: true,
  //   text: '上传中...',
  //   background: 'rgba(0, 0, 0, 0.7)'
  // })
  // return true
}

const handleExceed = (files, uploadFiles) => {
  // console.log(files, uploadFiles)
  ElMessage({
    showClose: true,
    message: `上传文件数量不能超过 ${props.limit} 个!`,
    type: 'error'
  })
}

const handleChange = (file, uploadFiles) => {
  if (props.isHideUpload && uploadFiles.length == props.limit) {
    isHideLoad.value = true
  }
}

const handleDelete = (file, uploadFiles) => {
  if (props.isHideUpload && uploadFiles.length === 0) {
    isHideLoad.value = false
  }
  ElMessage({
    showClose: true,
    message: `删除 ${file.name} 成功!`,
    type: 'success'
  })
}

const handlePictureCardPreview = uploadFile => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true
}

onMounted(() => {})
</script>
<style lang="scss" scoped>
.hide {
  :deep(.el-upload--picture-card) {
    display: none;
  }
}
</style>
